<template>
    <ul class="color-labels">
        <li v-for="(item, index) in colorNames" :key="index" :class="{'selected':(item.color == color)}">
            <span class="color-label" :class="`color-label-${item.index}`" @click="select(item)">
                <i class="iconfont icon-check"></i>
            </span>
        </li>
    </ul>
</template>

<script>
    export default {
        name: 'ColorLabel', // 颜色标签 by julei
        props: {
            value: {
                type: String,
                default: ''
            }
        },
        components: {},
        data() {
            return {
                colorNames: [
                    { color: '#ddd', index: 0 },
                    { color: '#22d7bb', index: 1 },
                    { color: '#18bfa4', index: 2 },
                    { color: '#2cccda', index: 3 },
                    { color: '#2dbcff', index: 4 },
                    { color: '#4e8af9', index: 5 },
                    { color: '#7076fa', index: 6 },
                    { color: '#9473fd', index: 7 },
                    { color: '#c472ee', index: 8 },
                    { color: '#ef7ede', index: 9 },
                    { color: '#f969aa', index: 10 },
                    { color: '#fc587b', index: 11 },
                    { color: '#fa5a55', index: 12 },
                    { color: '#ff7747', index: 13 },
                    { color: '#ffa415', index: 14 },
                    { color: '#ffd234', index: 15 },
                    { color: '#99d75a', index: 16 },
                    // { color: '#66c060', index: 17 },
                    { color: '#39ba5d', index: 17 },
                ]
            }
        },
        computed: {
            color: {
                get: function() {
                    return this.value
                },
                set: function(val) {
                    this.$emit('input', val);
                }
            }
        },
        methods: {
            select(item) {
                this.color = item.color;
            },
        }
    }

</script>

<style lang="scss" scoped>
ul.color-labels {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

ul.color-labels li {
    list-style: none;
    cursor: pointer;
    justify-content: space-between;
    margin-right: 5px;
}

ul.color-labels li .color-label {
    padding: 0 4px 6px;
}

ul.color-labels li .color-label, ul.color-labels li .color-label {
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}

.color-label-0{background:#ddd}
.color-label-0:hover{background:#b7b7b7}
.color-label-1{background:#22d7bb}
.color-label-1:hover{background:#189582}
.color-label-2{background:#18bfa4}
.color-label-2:hover{background:#0f7b6a}
.color-label-3{background:#2cccda}
.color-label-3:hover{background:#1c939e}
.color-label-4{background:#2dbcff}
.color-label-4:hover{background:#0098e0}
.color-label-5{background:#4e8af9}
.color-label-5:hover{background:#085af2}
.color-label-6{background:#7076fa}
.color-label-6:hover{background:#262ff7}
.color-label-7{background:#9473fd}
.color-label-7:hover{background:#5a28fc}
.color-label-8{background:#c472ee}
.color-label-8:hover{background:#a72ee6}
.color-label-9{background:#ef7ede}
.color-label-9:hover{background:#e73acd}
.color-label-10{background:#f969aa}
.color-label-10:hover{background:#f61f80}
.color-label-11{background:#fc587b}
.color-label-11:hover{background:#fb0d40}
.color-label-12{background:#fa5a55}
.color-label-12:hover{background:#f8120b}
.color-label-13{background:#ff7747}
.color-label-13:hover{background:#f94100}
.color-label-14{background:#ffa415}
.color-label-14:hover{background:#c77a00}
.color-label-15{background:#ffd234}
.color-label-15:hover{background:#e6b300}
.color-label-16{background:#99d75a}
.color-label-16:hover{background:#73b82d}
// .color-label-17:hover{background:#66c060}
// .color-label-17:hover{background:#42973c}
.color-label-17{background:#39ba5d}
.color-label-17:hover{background:#277f40}

ul.color-labels li.selected i {
    color: #fff;
    visibility: visible;
}
ul.color-labels li i {
    visibility: hidden;
    font-size: 16px;
}
</style>
